<template lang="pug">
  Card.database-con
    Tabs(:animated='false',@on-click='handleTabActive')
      TabPane(v-for="(item, index) in tabData",:key="index",:label='item.label',:name='item.component')
    component(:is='tabPaneComponent',
      :sourceBtnStatus="$route.meta['源数据']['/data/dataSource/detail']?true:false",
      :structureBtnStatus="$route.meta['结构数据']['/data/constructionSource/detail']?true:false",
      :structureDownBtnStatus="$route.meta['结构数据']['/data/constructionSource/download']?true:false"
      :exportedBtnStatus="$route.meta['导出记录']['/data/downloadHistory/download']?true:false")
</template>

<script>
import sourceData from './components/sourceData'
import structure from './components/structure'
import exported from './components/exported'

export default {
  name: 'DataBaseSearch',
  components: { sourceData, structure, exported },
  data() {
    return {
      tabData: [],
      tabPaneComponent: ''
    }
  },
  mounted() {
    Object.keys(this.$route.meta).forEach(item => {
      let tabItem = {}
      if (item === '源数据') tabItem = { label: item, component: 'sourceData' }
      if (item === '结构数据') tabItem = { label: item, component: 'structure' }
      if (item === '导出记录') tabItem = { label: item, component: 'exported' }
      this.tabData.push(tabItem)
    })
    this.tabPaneComponent = this.tabData[0].component
  },
  methods: {
    handleTabActive(name) {
      this.tabPaneComponent = name
    }
  }
}
</script>

<style lang="scss">
.database {
  &-con {
    margin-bottom: 100px;
    padding-bottom: 50px;
  }
  &-header {
    border-bottom: 1px dashed #e8e8e8;
    margin: 10px 0 30px;
  }
  &-modal {
    .ivu-modal-body {
      max-height: 540px;
      overflow-y: scroll;
    }
  }
  &-export {
    .ivu-modal-body {
      padding-bottom: 0;
    }
  }
}
</style>



